<template>
	<view class="user">
				<u-toast ref="uToast"></u-toast>
		<!-- 用户信息展示 -->
		<view class="show">
			<view class="showTop">
				<view class="">
					<u-link href="#" text="退出登录" @click="quit"></u-link>
				</view>
			</view>
			<view class="headerImg" @tap="changeHeaderImg">
				<view class="">
					<u-avatar :src="headerImg" size="100"></u-avatar>
					
				</view>
					<view class="iconfont icon-zhaoxiangji"></view>
			</view>
				
		</view>
		
		<!-- 用户资料编辑 -->
		<view class="edit">
			<view class="data-list">
				<view class="search">
					<view class="iconfont icon-yanjing"></view>
					<view class="text">View</view>
				</view>
				<view class="col" style="border: 1px solid #CFCDD0;">
					<view class="iconfont icon-aixin"></view>
					<view class="text">Star</view>
				</view>
				<view class="per">
					<view class="iconfont icon-yonghu"></view>
					<view class="text">User</view>
				</view>
			</view>
	
			
	
			<!-- 功能列表 -->
			<view class="fc">
					<u-cell-group :border="false">
							<u-cell icon="setting-fill" :isLink="true" title="修改资料" @click="editUser"></u-cell>
							<u-cell icon="file-text-fill" :isLink="true" title="我抽到的"></u-cell>
							<u-cell  icon="thumb-up-fill" :isLink="true" title="赞赏支持" ></u-cell>
							<u-cell icon="edit-pen-fill" :isLink="true" title="提交建议"></u-cell>
							<u-cell icon="star-fill" :isLink="true" title="关于我们" ></u-cell>
						</u-cell-group>
					
			</view>
	
		</view>
			
		
		
			
			
	</view>
</template>

<script>
	import {tokenToUser} from '@/utils/init.js'
	export default {
		data(){
			return {
			
			}
		},
		onLoad() {
		
		
		
		},
		computed:{
			headerImg(){
				
				return this.$store.state.user.user.picture
			}
		},
		methods:{
			quit(){ //退出登录
			
					uni.removeStorage({ //先删除本地缓存中的token 
						key:'token',
						success:()=>{
							
							this.$store.commit('user/SET_TOKEN','') //再清除vuex中的token
							uni.reLaunch({ //最后退出
								url:'/pages/login/index'
							})
						}
					})
			},
			editUser(){
				uni.navigateTo({
					url:'/pages/user/editUser/editUser'
				})
			},
			//更换头像
			changeHeaderImg(){
					uni.chooseImage({
						count:1,
						success:({tempFiles,tempFilePaths})=>{
						
							     uni.uploadFile({
							            url: 'http://139.224.164.161:9998/index.php/blientBoxuser/upload',
							            filePath: tempFilePaths[0],
							            name: 'file',
							            success: (uploadFileRes) => {
											var imgPath=JSON.parse(uploadFileRes.data).data.data
											var {sex,age} = this.$store.state.user.user
											console.log(sex,age)
											this.$myRquest({
												url:'/user/edit',
												method:'post',
												data:{
													sex,
													age,
													picture:imgPath
												}
											}).then(res=>{
												tokenToUser() //重新获取用户信息
											})
							            }
							        });
						
						}
					})
			}
		}
	}
	
</script>

<style scoped lang="scss">	
	.user{
		background-color: #F1F1F1;
	}
	.show{
		width: 100%;
		height: 35vh;
		// border: 1px solid red;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.showTop{
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}
	}
	.edit{
		width:100%;
		height: 50vh;
		// border: 1px solid red;
	}
	.headerImg{
		position: relative;
	
		
	}
	.icon-zhaoxiangji{
		position: absolute;
		top: 140rpx;
		right: 10rpx;
		font-size: 50rpx;
		color:#CFCDD0;
	}
	.data-list{
		width: 100%;
		height: 120rpx;
		// border: 1px solid green;	
		box-shadow: 0px 1px 5px 3px #CFCDD0;
		display: flex;	
	}
	.data-list>view{
			flex:1;
			height: 100%;
			// border: 1px solid black;
			display: flex;
			justify-content: center;
			align-items: center;
			.text{
				font-size: 25rpx;
				font-weight: 510;
			}
			.iconfont{
				margin-right:10rpx !important;
			}
		}
		
	.fc{
		width: 90vw;
		height: 440rpx;
		border: 1px solid #CFCDD0;
		border-radius: 20rpx;
		margin: 50rpx auto;
	}
</style>
